<template>
  <section class='f-more'>
    <div class="f-cell">
      <img style="height:50px;width:50px;" src="@/assets/icons/jhh_more_icon_head.png" alt="">
      <div class="f-ml-15" style="color: #000000;">
        <p style="font-size: 17px;">{{userInfo.name}}</p>
        <p class="f-mt-10" style="font-size: 12px;">{{userInfo.account}}</p>
      </div>
    </div>

    <van-cell class="f-mt-15" title="更换手机号码" is-link style="color:#000000" @click="pageJump('changePhone')">
      <template #icon>
        <section class="g-flex-ct f-mr-10">
          <img style="height:18px;width:12px" src="@/assets/icons/jhh_more_icon_phone.png" alt="">
        </section>
      </template>
    </van-cell>
    <van-cell title="修改登录密码" is-link style="color:#000000" @click="pageJump('changePwd')">
      <template #icon>
        <section class="g-flex-ct f-mr-10">
          <img style="height:15px;width:15px" src="@/assets/icons/jhh_more_icon_passward.png" alt="">
        </section>
      </template>
    </van-cell>

    <van-cell v-if="!isTest" class="f-mt-15" title="提现账户" is-link style="color:#000000" @click="pageJump('tixzhanghu')">
      <template #icon>
        <section class="g-flex-ct f-mr-10">
          <img style="height:18px;width:12px" src="@/assets/icons/tixianzh.png" alt="">
        </section>
      </template>
    </van-cell>

    <van-cell class="f-mt-15" title="分享" is-link style="color:#000000" @click="showShare = true">
      <template #icon>
        <section class="g-flex-ct f-mr-10">
          <img style="height:16px;width:16px" src="@/assets/icons/jhh_more_icon_share.png" alt="">
        </section>
      </template>
    </van-cell>
    <van-cell title="关于" is-link style="color:#000000" @click="toAbout">
      <template #icon>
        <section class="g-flex-ct f-mr-10">
          <img style="height:18px;width:18px" src="@/assets/icons/jhh_more_icon_about.png" alt="">
        </section>
      </template>
    </van-cell>

    <van-cell class="f-mt-15" title="系统客服" is-link style="color:#000000" @click="toWechat">
      <template #icon>
        <section class="g-flex-ct f-mr-10">
          <img style="height:16px;width:15px" src="@/assets/icons/jhh_more_icon_kefu.png" alt="">
        </section>
      </template>
    </van-cell>

    <van-cell class="f-mt-15" title="退出登录" is-link style="color:#000000" @click="handleQuit">
      <template #icon>
        <section class="g-flex-ct f-mr-10">
          <img style="height:16px;width:15px" src="@/assets/icons/jhh_more_icon_exit.png" alt="">
        </section>
      </template>
    </van-cell>

    <van-share-sheet v-model:show="showShare" :options="shareOptions" @select="onSelect" />
  </section>
</template>
<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import JsBridge from '@/utils/JsBridge.js'
import { showToast, showLoadingToast, closeToast } from 'vant';
import { getStore, successDeal, removeStore } from '@/utils/utils';
import api from './api'

export default {
  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const state = reactive({
      isTest: getStore('USER_INFO').phone == '15854106389',

      userInfo: {},

      showShare: false,
      shareOptions: [
        { name: '微信', icon: 'wechat' },
        { name: '复制链接', icon: 'link' },
      ]
    })

    onMounted(() => {
      state.userInfo = getStore('USER_INFO')

      store.commit("setNavBar", {
        title: '更多',
        show: true,
        left: false,
        leftType: 'back',
        right: false,
        rightType: 'search',
      });
    })

    const handleQuit = () => {
      api.quit().then(res => {
        router.replace('/')
      }).catch(err => {
        router.replace('/')
      })
      removeStore('USER_INFO')
    }

    const pageJump = (name) => {
      router.push({
        path: `/more/${name}`
      })
    }

    const onSelect = (option) => {
      let url = `${location.origin}${location.pathname}#/share`
      if (option.name == '复制链接') {
        handleCopy(url)
      }
      if (option.name == '微信') {
        const data = {
          type: "wechat_session",
          url: url,
          key: "wx55467dbaf8847c2d",
          title: '淏咖宝',
          description: '测试内容'
        }
        JsBridge.callHandler('share', data, (res) => {
          console.log('share 响应值 ： ', res);
        })
      }

      state.showShare = false;
    };

    function handleCopy(value) {
      const input = document.createElement('input');
      document.body.appendChild(input);
      input.setAttribute('value', value);
      input.select();
      if (document.execCommand('copy')) {
        document.execCommand('copy');
        successDeal('复制成功！')
      }
      document.body.removeChild(input);
    }

    const toAbout = () => {
      JsBridge.callHandler('push', { pageName: 'About', pageData: "测试跳转" }, (res) => {
        console.log('pushPage 响应值 ： ', res);
      })
    }

    const toWechat = () => {
      router.push({
        path: '/more/wechat'
      })
    }

    return {
      ...toRefs(state),
      handleQuit,
      pageJump,
      onSelect,
      toAbout,
      toWechat
    }
  }
}
</script>
<style lang='scss' scoped>
.f-more {
  .f-cell {
    width: 375px;
    height: 103px;
    background: #ffffff;
    display: flex;
    padding: 29px 12px;
  }
}
</style>